import {Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {ActivatedRoute} from "@angular/router";

import {Subscription} from "rxjs/Subscription";
import {Router} from "@angular/router";
import {Content} from "@shared/components/toolbar/toolbar-content";
import {ToolsService} from "@shared/service/tools/tools.service";
import {ToolbarService} from "@shared/components/toolbar/toolbar.service";
import {InvestmentService} from "@investment/investment.service";

@Component({
  selector: 'seed-investment-detail',
  templateUrl: './investment-detail.component.html',
  styleUrls: ['./investment-detail.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class InvestmentDetailComponent implements OnInit, OnDestroy {
  public tabs: any;
  public eventClass = 'detail';
  public investmentDetail: any;
  public eventsDetail: any;
  public hasContact = false;
  public contactInfo: any;
  public sponsorId: any;
  public contactPlan: any;
  public toggleContact = false;
  subscription: Subscription = new Subscription();
  @ViewChild(Content) content;

  constructor(public route: ActivatedRoute,
              public toolsService: ToolsService,
              public toolBarService: ToolbarService,
              public investmentService: InvestmentService,
              public router: Router) {
    this.tabs = [
      {title: '赛事详情', content: '赛事详情'},
      {title: '招商方案', content: '招商方案'},
      {title: '联系方式', content: '联系方式'}
    ];
  }

  ngOnInit() {
    this.toolsService.showLoading();
    this.subscription.add(
      this.route.queryParams.do(() => this.toolBarService.unfoldNav()).subscribe(param => {
        this.sponsorId = param['sponsorId'];
        this.GetInvestmentDetail(this.sponsorId);
        this.GetInvestmentPlan(this.sponsorId);
        this.GetInvestmentContact(this.sponsorId);
      })
    );
  }

  GetInvestmentDetail(sponsorId) {
    this.subscription.add(
      this.investmentService.getInvestmentDetail(sponsorId).subscribe(res => {
        if (res.result === '0') {
          this.investmentDetail = res.data;
          this.GetEventDetail(res.data.matchId);
          this.toolsService.hideLoading();
        }
      })
    );
  }

  GetEventDetail(matchId) {
    this.subscription.add(
      this.investmentService.getEventDetailInfo(matchId).subscribe(res => {
        if (res.result === '0') {
          this.eventsDetail = res.data;
        }
      })
    );
  }

  GetInvestmentPlan(sponsorId) {
    this.subscription.add(
      this.investmentService.getInvestmentPlan(sponsorId).subscribe(res => {
        if (res.result === '0') {
          this.contactPlan = res.data;
        }
      })
    );
  }

  GetInvestmentContact(sponsorId) {
    this.subscription.add(
      this.investmentService.getInvestmentContact(sponsorId).subscribe(res => {
        if (res.result === '0') {
          this.contactInfo = res.data;
        }
      })
    );
  }

  EvntsDetail() {
    this.eventClass = 'detail';
  }

  EvntsRule() {
    this.eventClass = 'rule';
  }

  EvntsContact() {
    this.eventClass = 'announce';
  }

  select(event) {
    if (event === 0) {
      this.EvntsDetail();
    } else if (event === 1) {
      this.EvntsRule();
    } else {
      this.EvntsContact();
    }
  }

  Contact() {
    this.toggleContact = true;
    this.content.scrollTop();
    this.content.disableScroll();
    this.hasContact = true;
  }

  CloseContact() {
    this.toggleContact = false;
    this.hasContact = false;
    this.content.enableScroll(true);
  }

  Submit(contactInfo) {
    this.toggleContact = false;
    this.subscription.add(
      this.investmentService.addContactInfo(contactInfo.contactObj).subscribe(res => {
        if (res.result === '0') {
          this.toolsService.showToast('提交成功');
        }
      })
    );
  }

  gotoHomepage(userId) {
    this.router.navigate([`/`, userId]);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
